<template>
  <!--    设置页面-->
    <div class="set" @mouseenter="closeShow = true" @mouseleave="closeShow = false" @click.stop>
        <transition name="el-fade-in-linear">
            <close-one
                    v-show="closeShow"
                    class="close"
                    fill="#ffffff60"
                    size="28"
                    theme="filled"
                    @click="store.setOpenState = false"
            />
        </transition>
        <el-row :gutter="40">
            <!-- 更新日志 -->
            <el-col :span="12" class="left">
                <div class="logo text-hidden">
                    <span class="bg">{{ siteUrl[0] }}</span>
                    <span class="sm">.{{ siteUrl[1] }}</span>
                </div>
                <div class="version">
                    <div class="num">锵锵-</div>
                    <el-tooltip :show-arrow="false" content="Github 源代码仓库" placement="right">
                        <github-one class="github" size="24" theme="outline" @click="jumpTo(gitHub_URL)"/>
                    </el-tooltip>
                </div>
                <el-card class="update">
                    <template #header>
                        <div class="card-header">
                            <span>更新日志</span>
                        </div>
                    </template>
                    <div class="upnote">
                        <div v-for="item in upData.new" :key="item" class="uptext">
                            <add-one size="22" theme="outline"/>
                            {{ item }}
                        </div>
                        <div v-for="item in upData.fix" :key="item" class="uptext">
                            <bug size="22" theme="outline"/>
                            {{ item }}
                        </div>
                    </div>
                </el-card>
            </el-col>
            <!-- 全局设置区域  -->
            <el-col :span="12" class="right">
                <div class="title">
                    <setting-two fill="#ffffff60" size="28" theme="filled"/>
                    <span class="name">全局设置</span>
                </div>
                <Set/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {AddOne, Bug, CloseOne, GithubOne, SettingTwo} from "@icon-park/vue-next";
import {mainStore} from "@/store";
import Set from "@/components/Set.vue";
import {computed, reactive, ref} from "vue";
import {gitHub_URL, URL} from '@/utils/constants.js';

const store = mainStore();
const closeShow = ref(false);

// 站点链接
const siteUrl = computed(() => {
    const url = URL;
    // 判断协议前缀
    if (url.startsWith("http://") || url.startsWith("https://")) {
        const urlFormat = url.replace(/^(https?:\/\/)/, "");
        return urlFormat.split(".");
    }
    return url.split(".");
});

// 更新日志
const upData = reactive({
    new: [
        "结构调整",
        "与数据库建立链接",
    ],
    fix: ["修复天气 API", "整合完成"],
});

// 跳转源代码仓库
const jumpTo = (url) => {
    window.open(url);
};

</script>

<style lang="scss" scoped>
.set {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: rgb(255 255 255 / 40%);
  border-radius: 6px;
  padding: 40px;

  .close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;

    &:hover {
      transform: scale(1.2);
    }

    &:active {
      transform: scale(1);
    }
  }

  .el-row {
    height: 100%;
    flex-wrap: nowrap;

    .left {
      height: 100%;
      padding-left: 40px !important;
      padding-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .logo {
        transform: translateY(-8%);
        font-family: "Pacifico-Regular";
        padding-left: 22px;
        width: 100%;
        height: 260px;

        .bg {
          font-size: 5rem;
        }

        .sm {
          margin-left: 6px;
          font-size: 2rem;
        }
      }

      .version {
        display: flex;
        flex-direction: row;
        align-items: center;

        .num {
          font-size: 2rem;
          font-family: "Pacifico-Regular";
        }

        .github {
          width: 24px;
          height: 24px;
          margin-left: 12px;
          margin-top: 6px;

          &:hover {
            transform: scale(1.2);
          }
        }
      }

      .update {
        margin-top: 30px;
        height: 100%;

        :deep(.el-card__body) {
          height: 100%;

          .upnote {
            padding: 20px;
            height: calc(100% - 56px);
            overflow-y: auto;

            .uptext {
              display: flex;
              flex-direction: row;
              align-items: center;
              padding-bottom: 16px;

              &:nth-last-of-type(1) {
                padding: 0;
              }

              .i-icon {
                width: 22px;
                height: 22px;
                margin-right: 8px;
              }
            }
          }
        }
      }
    }

    .right {
      height: 100%;
      padding-right: 40px !important;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        display: flex;
        align-items: center;
        flex-direction: row;
        font-size: 18px;
        margin-bottom: 16px;

        .i-icon {
          width: 28px;
          height: 28px;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
